export const addTag = (editor) => {

    const {Components} = editor;

    Components.addType('addTag', {
      model: {
        defaults: {
          name: 'addTag',
          droppable: false,
          attributes: {
              class:'tag-div'
          },
          components: [{
            type: 'text',
            tagName:'div',
            content:'直播状态：',
          },
          {
            tagName:'div',
            attributes:{
              class: 'tag-items'
            },
            components: [
              {
                tagName: 'p',
                type:'text',
                content:'tag1',
              },
              {
                tagName: 'p',
                type:'text',
                content:'tag2',
              }
            ]
          }
        ],
        styles:`
        .tag-div{
            font-family: 微软雅黑;
            font-weight: 400;
            font-style: normal;
            font-size: 15px;
            color: black;
            font-weight: lighter;
            display: flex;
            align-items: center;
        }
        .tag-div p{
            cursor: pointer;
            margin: 0px 3px 0px 3px;
            padding: 5px 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border-radius: 5px;
            color: rgb(64, 158, 255);
            border: 1px solid rgb(64, 158, 255);
        }
        .tag-div p:hover{
            color: white;
            background-color: rgb(64, 158, 255);
        }
        .tag-div p:active{
            background-color: rgb(57, 139, 222);
        }
        .tag-items{
            display: inline-flex;
        }  
        `,
          script() {
            var thx = document.getElementById(this.attributes.id.value);
          }
        },
        init() {  
        }, 
        removed() {
        },
      },
    })

    // 注册组件
    editor.BlockManager.add('add-tag', {
        label: 'Tag标签',
        category: 'Basic',
        media:`<svg t="1721997182346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2532" width="30" height="30"><path d="M194.133333 388.266667c0 53.333333 42.666667 96 96 96s96-42.666667 96-96-42.666667-96-96-96-96 42.666667-96 96z m128 0c0 17.066667-14.933333 32-32 32s-32-14.933333-32-32 14.933333-32 32-32 32 14.933333 32 32zM951.466667 569.6L469.333333 104.533333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l458.666667 441.6-270.933333 273.066667c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533333 8.533333 0 17.066667-2.133333 23.466667-8.533333l294.4-294.4c6.4-6.4 8.533333-14.933333 8.533333-23.466667 0-8.533333-4.266667-14.933333-10.666666-21.333333z" p-id="2533"></path><path d="M797.866667 593.066667c0-8.533333-4.266667-17.066667-8.533334-23.466667L371.2 151.466667l-12.8-12.8c-6.4-6.4-14.933333-8.533333-23.466667-8.533334H64c-17.066667 0-32 14.933333-32 32v270.933334c0 8.533333 4.266667 17.066667 8.533333 23.466666l430.933334 430.933334c6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333L789.333333 616.533333c4.266667-6.4 8.533333-14.933333 8.533334-23.466666zM494.933333 819.2L96 420.266667V194.133333h226.133333l398.933334 398.933334-226.133334 226.133333z" p-id="2534"></path></svg>`,
        content: {
          type:'addTag',
        },
    });
};